<template>
	<view class="container">
		<!-- 背景装饰 -->
		<view class="bg-decoration">
			<view class="circle circle-1"></view>
			<view class="circle circle-2"></view>
			<view class="circle circle-3"></view>
		</view>
		
		<!-- 登录卡片 -->
		<view class="login-card">
			<!-- 标题区域 -->
			<view class="header">
				<view class="icon-wrapper">
					<text class="icon">🛒</text>
				</view>
				<text class="title">智能售货机</text>
				<text class="subtitle">欢迎回来</text>
			</view>
			
			<!-- 表单区域 -->
			<view class="form">
				<view class="input-group">
					<view class="input-icon">👤</view>
					<input v-model="userName" class="input" placeholder="请输入用户名" placeholder-class="placeholder"></input>
				</view>
				
				<view class="input-group">
					<view class="input-icon">🔒</view>
					<input v-model="password" :password="!showPassword" class="input" placeholder="请输入密码" placeholder-class="placeholder"></input>
					<view class="eye-icon" @click="togglePasswordVisibility">
						<text>{{ showPassword ? '👁️' : '👁️‍🗨️' }}</text>
					</view>
				</view>
				
				<button @click="onLoginButtonClicked()" class="button primary" :disabled="loading">
					<text class="button-text">{{ loading ? '登录中...' : '立即登录' }}</text>
				</button>
				
				<view class="divider">
					<view class="divider-line"></view>
					<text class="divider-text">或</text>
					<view class="divider-line"></view>
				</view>
				
				<button @click="onRegisterButtonClicked()" class="button secondary">
					<text class="button-text">创建新账号</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	let tag = "login";
	
	export default {
		data() {
			return {
				// 用户名
				userName: "",
				// 密码
				password: "",
				// 加载状态
				loading: false,
				// 密码显示状态
				showPassword: false
			}
		},
		
		onLoad() {
			this.$log.info(tag, "onLoad");
			// 检查是否已登录，如果已登录则直接跳转到商品列表页
			if (this.$loginManager.isLoggedIn()) {
				this.$log.info(tag, "用户已登录，跳转到商品列表页");
				uni.switchTab({
					url: "/pages/product-list/product-list"
				});
			} else {
				// 未登录，自动填充上次登录的用户名
				const savedUserName = this.$loginManager.getUserName();
				if (savedUserName) {
					this.userName = savedUserName;
					this.$log.info(tag, `自动填充用户名: ${savedUserName}`);
				}
			}
		},
		
		methods: {
			// 切换密码显示/隐藏
			togglePasswordVisibility() {
				this.showPassword = !this.showPassword;
				// this.$log.info(tag, `密码显示状态: ${this.showPassword}`);
			},
			
			onRegisterButtonClicked() {
				this.$log.info(tag, "onRegisterButtonClicked");
				uni.navigateTo({
					url: '/pages/register/register'
				})
			},
			
			onLoginButtonClicked() {
				this.$log.info(tag, "onLoginButtonClicked");
				
				// 表单验证
				if (!this.userName.trim()) {
					this.$log.error(tag, "用户名为空");
					uni.showToast({
						icon: 'none',
						title: "请输入用户名",
						duration: 1500
					});
					return;
				}
				
				if (!this.password.trim()) {
					this.$log.error(tag, "密码为空");
					uni.showToast({
						icon: 'none',
						title: "请输入密码",
						duration: 1500
					});
					return;
				}
				
				// 密码长度检查
				if (this.password.length < 6) {
					this.$log.error(tag, "密码长度不足6位");
					uni.showToast({
						icon: 'none',
						title: "密码长度至少6位",
						duration: 1500
					});
					return;
				}
				
				// 设置加载状态
				this.loading = true;
				
				uni.request({
					url: `${this.$constant.BASE_URL}/api/customer/login`,
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					data: {
						"password": this.password,  
						"username": this.userName
					},
					success: (res) => {
						this.$log.info(tag, "登录请求成功");
						this.$log.info(tag, JSON.stringify(res.data));
						
						if (res.data.code == 200) {
							// 保存 token 和用户名
							this.$loginManager.setToken(res.data.token);
							this.$loginManager.setUserName(this.userName);
							this.$log.info(tag, "登录成功，token和用户名已保存");
							
							uni.showToast({
								icon: 'success',
								title: "登录成功",
								duration: 1500
							});
							
							// 延迟跳转，确保用户看到成功提示
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/product-list/product-list"
								});
							}, 1500);
						} else {
							this.$log.error(tag, `登录失败: ${res.data.msg || '未知错误'}`);
							uni.showToast({
								icon: 'none',
								title: res.data.msg || "登录失败",
								duration: 1500
							});
						}
					},
					fail: (err) => {
						this.$log.error(tag, "登录请求失败:", err.errMsg);
						uni.showToast({
							icon: 'none',
							title: "网络请求失败，请检查网络连接",
							duration: 1500
						});
					},
					complete: () => {
						// 无论成功失败，都关闭加载状态
						this.loading = false;
					}
				})
			}
		}
	}
</script>

<style scoped>
	/* 容器 - 渐变背景 */
	.container {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		position: relative;
		overflow: hidden;
	}
	
	/* 背景装饰圆圈 */
	.bg-decoration {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		overflow: hidden;
		pointer-events: none;
	}
	
	.circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
		animation: float 6s ease-in-out infinite;
	}
	
	.circle-1 {
		width: 300rpx;
		height: 300rpx;
		top: -100rpx;
		left: -100rpx;
		animation-delay: 0s;
	}
	
	.circle-2 {
		width: 200rpx;
		height: 200rpx;
		bottom: -50rpx;
		right: -50rpx;
		animation-delay: 2s;
	}
	
	.circle-3 {
		width: 150rpx;
		height: 150rpx;
		top: 50%;
		right: 10%;
		animation-delay: 4s;
	}
	
	@keyframes float {
		0%, 100% {
			transform: translateY(0) scale(1);
			opacity: 0.3;
		}
		50% {
			transform: translateY(-30rpx) scale(1.1);
			opacity: 0.5;
		}
	}
	
	/* 登录卡片 */
	.login-card {
		width: 100%;
		max-width: 600rpx;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 40rpx;
		padding: 60rpx 50rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(10px);
		position: relative;
		z-index: 1;
	}
	
	/* 标题区域 */
	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 50rpx;
	}
	
	.icon-wrapper {
		width: 120rpx;
		height: 120rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		box-shadow: 0 10rpx 30rpx rgba(102, 126, 234, 0.4);
	}
	
	.icon {
		font-size: 60rpx;
	}
	
	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: #2d3748;
		margin-bottom: 10rpx;
	}
	
	.subtitle {
		font-size: 28rpx;
		color: #718096;
	}
	
	/* 表单区域 */
	.form {
		width: 100%;
	}
	
	/* 输入框组 */
	.input-group {
		position: relative;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		background: #f7fafc;
		border-radius: 24rpx;
		padding: 0 30rpx;
		border: 2rpx solid transparent;
		transition: all 0.3s ease;
	}
	
	.input-group:focus-within {
		background: #fff;
		border-color: #667eea;
		box-shadow: 0 0 0 4rpx rgba(102, 126, 234, 0.1);
	}
	
	.input-icon {
		font-size: 36rpx;
		margin-right: 20rpx;
		opacity: 0.6;
	}
	
	/* 眼睛图标 */
	.eye-icon {
		font-size: 40rpx;
		margin-left: 10rpx;
		opacity: 0.5;
		cursor: pointer;
		transition: opacity 0.3s ease;
		padding: 10rpx;
	}
	
	.eye-icon:active {
		opacity: 1;
	}
	
	.input {
		flex: 1;
		height: 90rpx;
		font-size: 32rpx;
		color: #2d3748;
		background: transparent;
		border: none;
	}
	
	.placeholder {
		color: #a0aec0;
	}
	
	/* 按钮 */
	.button {
		width: 100%;
		height: 96rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		border: none;
		position: relative;
		overflow: hidden;
		transition: all 0.3s ease;
	}
	
	.button::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.2);
		transition: left 0.5s ease;
	}
	
	.button:active::before {
		left: 100%;
	}
	
	.button.primary {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		box-shadow: 0 10rpx 30rpx rgba(102, 126, 234, 0.4);
	}
	
	.button.primary:active {
		transform: translateY(2rpx);
		box-shadow: 0 5rpx 20rpx rgba(102, 126, 234, 0.3);
	}
	
	.button.secondary {
		background: #f7fafc;
		border: 2rpx solid #e2e8f0;
	}
	
	.button.secondary:active {
		background: #edf2f7;
		transform: translateY(2rpx);
	}
	
	.button-text {
		font-size: 32rpx;
		font-weight: 600;
		position: relative;
		z-index: 1;
	}
	
	.button.primary .button-text {
		color: #fff;
	}
	
	.button.secondary .button-text {
		color: #667eea;
	}
	
	.button[disabled] {
		opacity: 0.6;
		transform: none !important;
	}
	
	/* 分割线 */
	.divider {
		display: flex;
		align-items: center;
		margin: 40rpx 0;
	}
	
	.divider-line {
		flex: 1;
		height: 2rpx;
		background: #e2e8f0;
	}
	
	.divider-text {
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #a0aec0;
	}
</style>

